﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页聊天室登录页面</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/star.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
    <div class="moon">
        <div class="crater"></div>
    </div>
    <div class="footprints">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="astronaut">
        <div class="backpack"></div>
        <div class="head">
            <div class="helmet"></div>
        </div>
        <div class="neck"></div>
        <div class="body"></div>
        <div class="arm right">
            <div class="top"></div>
            <div class="bot"></div>
            <div class="hand"></div>
        </div>
        <div class="arm left">
            <div class="top"></div>
            <div class="bot"></div>
            <div class="hand"></div>
        </div>
        <div class="leg right">
            <div class="top"></div>
            <div class="bot"></div>
            <div class="foot"></div>
        </div>
        <div class="leg left">
            <div class="top"></div>
            <div class="bot"></div>
            <div class="foot"></div>
        </div>
    </div>
    <div class="star comet"></div>
    <form class="box" action="/" method="post">
        <h1>登录</h1>
        <input type="text" id="username" placeholder="用户名">
        <input type="password" id="password" placeholder="密码">
        <input type="submit" id="submit" value="登录">
    <p>还没有账号？<a href="register.html">立即注册</a></p>

    </form>

    <!-- 引入 jquery -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- 实现前后端交互的逻辑 -->
    <script>
        let submitButton = document.querySelector('#submit');
        submitButton.onclick = function(){
            // 1. 获取到输入框中的内容
            let username = document.querySelector('#username').value;
            let password = document.querySelector('#password').value;
            if(username == '' || password == ''){
                alert("当前输入的用户名或者密码为空！");
                return;
            }
            // 2. 再发送 ajax 请求进行登录
            $.ajax({
                url:'/login',
                type:'post',
                data:{
                    username:username,
                    password:password
                },
                success:function(body){
                    // 3. 处理响应
                    // 此处的 body 相当于 user 对象 
                    if(body && body.userId >0){
                        // 登录成功！
                        alert("登录成功");
                        // 跳转主页面
                        location.assign('/client.html');
                    }else{
                        alert("登录失败");
                    }
                }
            });
        }
    </script>
</body>
</html>
<script src="js/index.js"></script>